<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:日志列表详情组件
* @fileName:LogsDetails.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-6
!-->
<script setup lang="ts">
const props = defineProps({
  tableData: Array as any,
  // 数据列表加载动画
  isListLoading: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <div class="page-details">
    <el-table
      v-loading="props.isListLoading"
      :data="props.tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="createTime" label="操作时间" />
      <el-table-column
        prop="nickName"
        label="操作用户"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          {{ scope.row.nickName ? scope.row.nickName : "用户已被删除" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        label="用户账号"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          {{ scope.row.userName ? scope.row.userName : "用户已被删除" }}
        </template>
      </el-table-column>
      <el-table-column prop="eventName" label="事件" />
      <el-table-column prop="url" label="路由" />
      <el-table-column
        prop="eventContent"
        label="日志内容"
        width="500px"
        :show-overflow-tooltip="true"
      />
      <template v-slot:empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.page-details {
  margin-top: 15px;
}

.el-table {
  :deep(th) {
    background-color: #fafafa;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(td) {
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(.el-table__row--striped) {
    td {
      background-color: rgba($color: #f6f6f6, $alpha: 0.56) !important;
    }
  }
  :deep(.el-table__inner-wrapper) {
    &::before {
      height: 0;
    }
  }
}
</style>
